<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="favicon.ico" />
    <title>vis.js - Groups documentation.</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Tipue vendor css -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css"
      rel="stylesheet"
    />

    <link href="../../common-docs-files/css/style.css" rel="stylesheet" />
    <link href="../css/overrides.css" rel="stylesheet" />

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"
      type="text/css"
      rel="stylesheet"
    />
    <script
      type="text/javascript"
      src="../../common-docs-files/js/toggleTable.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"
    ></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style></style>
  </head>

  <body onload="prettyPrint();">
    <div class="navbar-wrapper">
      <div class="container">
        <nav class="navbar-inverse navbar-static-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#navbar"
                aria-expanded="false"
                aria-controls="navbar"
              >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav"></ul>
              <form class="navbar-form navbar-right" role="search">
                <input
                  name="q"
                  id="tipue_search_input"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  placeholder="Enter keywords"
                />
                <button
                  type="button"
                  class="btn btn-default"
                  onclick="vis.initSiteSearch(true);"
                >
                  Go!
                </button>
              </form>
              <div id="search-results-wrapper" class="panel panel-default">
                <div class="panel-body">
                  <div id="tipue_search_content"></div>
                </div>
              </div>
              <div id="keyword-info" class="panel panel-success">
                <div class="panel-body">
                  Found <span id="keyword-count"></span> results. Click
                  <a id="keyword-jumper-button" href="">here</a> to jump to the
                  first keyword occurence!
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <div class="container full">
      <h1>Network - groups</h1>

      <p>Handles the group styling.</p>
      <h3>Options</h3>

      <p>
        The options for the canvas have to be contained in an object titled
        'groups'.
      </p>
      <p>
        Click on the options shown to show how these options are supposed to be
        used.
      </p>
      <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)">
          <a href="#">options hidden</a>
        </li>
        <li
          role="presentation"
          onclick="toggleTab(this);"
          targetNode="fullOptions"
        >
          <a href="#">options shown</a>
        </li>
      </ul>
      <br />
      <pre class="prettyprint lang-js options hidden" id="fullOptions">
var options = {
  groups:{
    useDefaultGroups: true,
    myGroupId:{
      /*node options*/
    }
  }
}

network.setOptions(options);
</pre
      >
      <p>All of the individual options are explained here:</p>
      <table class="options">
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Default</th>
          <th>Description</th>
        </tr>
        <tr>
          <td>useDefaultGroups</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            If your nodes have groups defined that are not in the Groups module,
            the module loops over the groups it does have, allocating one for
            each unknown group. When all are used, it goes back to the first
            group. By setting this to false, the default groups will not be used
            in this cycle.
          </td>
        </tr>
        <tr>
          <td>group*</td>
          <td>Object</td>
          <td><code></code></td>
          <td>
            You can add multiple groups containing styling information that
            applies to a certain subset of groups. All options described in the
            <a href="./nodes.html">nodes module</a> that make sense can be used
            here (you're not going to set the same id or x,y position for a
            group of nodes). Example:
            <pre class="prettyprint lang-js options">
var nodes = [
    {id:1, group:'myGroup', label:"I'm in a custom group called 'myGroup'!"}
]

var options = {
  groups: {
    myGroup: {color:{background:'red'}, borderWidth:3}
  }
}
</pre
            >
            *) the option is not called group, as shown by the example but can
            by any custom id, except for 'useDefaultGroups'.
          </td>
        </tr>
      </table>

      <div class="flagbar">
        <a href="../../docs/network/groups.html" title="English"
          ><span class="flag en"></span
        ></a>
        <a href="../../docs-kr/network/groups.html" title="Korean"
          ><span class="flag kr"></span
        ></a>

        <br />

        Third party docs:
        <a href="https://ame.cool/core/frontend-tools/" title="Chinese"
          ><span class="flag zh"></span
        ></a>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../common-docs-files/js/ie10-viewport-bug-workaround.js"></script>
    <!-- jquery extensions -->
    <script src="../../common-docs-files/js/jquery.highlight.js"></script>
    <script src="../../common-docs-files/js/jquery.url.min.js"></script>
    <!-- Tipue vendor js -->
    <script src="../../common-docs-files/js/tipuesearch.config.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.min.js"></script>
    <!-- controller -->
    <script src="../../common-docs-files/js/main.js"></script>
  </body>
</html>
